<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .popUp-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:2;display:none;opacity:0;-webkit-transition:.5s;transition:.5s}
        .popUp-wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;height:100vh;-webkit-transform:scale(.5);transform:scale(.5);opacity:0}
        .popUp-hide{display:none}
        .popUp-sign{width:60vw;-webkit-transform:translateY(6vw);transform:translateY(6vw)}
        .popUp-info{width:70vw;border-radius:10px;background:#fff;text-align:center;padding:2vw 0 20px 0}
        .popUp-img-wrap{width:30vw;height:30vw;overflow:hidden;margin:0 auto}
        .popUp-img-wrap img{width:100%}
        .popUp-title{margin:20px 0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
        .popUp-slogan{margin:20px 0;color:#888;font-size:14px}
        .popUp-btn{width:40vw;padding:10px 0;text-align:center;color:#fff;border-radius:30vw;background:-webkit-linear-gradient(left,#fa5556,#fa2e2f);background:linear-gradient(to right,#fa5556,#fa2e2f);margin-top:20px}
        .popUp-close{width:7vw;height:7vw;border-radius:50%;border:2px solid #fff;position:fixed;top:40px;right:40px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
        .popUp-close::before{content:'';display:block;width:80%;height:2px;background:#fff;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
        .popUp-close::after{content:'';display:block;width:2px;height:80%;background:#fff;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
        @-webkit-keyframes fadeIn{0%{opacity:0}
        100%{opacity:1}
        }
        @keyframes fadeIn{0%{opacity:0}
        100%{opacity:1}
        }
        @-webkit-keyframes fadeOut{0%{opacity:1}
        100%{opacity:0}
        }
        @keyframes fadeOut{0%{opacity:1}
        100%{opacity:0}
        }
        @-webkit-keyframes scaleIn{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}
        100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
        }
        @keyframes scaleIn{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}
        100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
        }
        @-webkit-keyframes scaleOut{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
        100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}
        }
        @keyframes scaleOut{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
        100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}
        }
    </style>
</head>

<body>
    <div class="popUp-mask">
        <div class="popUp-wrapper">
            <img class="popUp-sign" src="../images/demi_fail.png" alt="">
            <div class="popUp-info">
                <p class="popUp-title">商品名称</p>
                <div class="popUp-img-wrap">
                    <img src="https://img.alicdn.com/imgextra/i1/2340545996/O1CN011uADHKHlJA19w4r_!!2340545996-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <p class="popUp-slogan">欧气满满~成功抢购！</p>
            </div>
            <div class="popUp-btn">点击查看</div>
        </div>
        <div class="popUp-close"></div>
    </div>

    <button id="success">成功</button>
    <button id="fail">失败</button>

    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
        $('#success').click(function() {
            togglePopUp(1);
        })
        $('#fail').click(function() {
            togglePopUp(0);
        })

        function togglePopUp(status) {
            var img = document.querySelector('.popUp-sign'),
                text = document.querySelector('.popUp-slogan');
            if (status === 0) {
                img.src = "../images/demi_fail.png";
                text.innerHTML = '您的商品没抢购到，今天再试试吧！';
                $('.popUp-btn').text('前往抢购');
            } else {
                img.src = "../images/demi_success.png";
                text.innerHTML = '欧气满满~成功抢购！';
                $('.popUp-btn').text('点击查看');
            }

            function popUpClose() {
                $('.popUp-mask').css('animation', 'fadeOut .5s forwards');
                $('.popUp-wrapper').css('animation', 'scaleOut .5s forwards');
                setTimeout(function () {
                    $('.popUp-mask').css('display', 'none');
                $('.popUp-mask').css('animation', '');
                }, 500);
            }

            $('.popUp-mask').css('display', 'block');
            setTimeout(function () {
                $('.popUp-mask').css('animation', 'fadeIn .5s forwards');
                $('.popUp-wrapper').css('animation', 'scaleIn .5s .2s forwards');
            }, 10);
            $('.popUp-close').click(function () {
                popUpClose();
            })
            $('.popUp-mask').on('touchmove',function(e){
                e.preventDefault();
            })
        }
    </script>
</body>

</html>